<template>
    <div>
        <el-table
            :data="this.personList"
            border
            style="width: 100%"
            fit>
            <el-table-column
                fixed
                prop="id"
                label="序号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="pname"
                label="姓名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="picture"
                label="照片"
                width="200">
                <template slot-scope="scope">
                    　　　　<img :src="scope.row.picture" style="height: 130px;width: 150px"/>
                    　　</template>
            </el-table-column>
            <el-table-column
                prop="detail"
                label="简介"
                width="200">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="deletePerson(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="personVisible=true" style="margin-top: 10px;">添加学生</el-button>
        <el-dialog
            title="添加老师"
            :visible.sync="personVisible"
            width="30%">
            学生照片：
            <el-upload
                action="http://121.196.151.13:8088/upload/picture"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="personSuccess">
                <i class="el-icon-plus"></i>
            </el-upload>
            <div class="list-item" style="margin-top: 5px;">学生姓名：<el-input v-model="student.pname" placeholder="请输入学生姓名" style="width: 100%"></el-input></div>
            <div class="list-item" style="margin-top: 5px;">学生简介：<el-input type="textarea" v-model="student.detail" placeholder="请输入学生简介" style="width: 100%"></el-input></div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="personVisible = false">取 消</el-button>
    <el-button type="primary" @click="addPerson">确 定</el-button>
  </span>
        </el-dialog>
    </div>


</template>

<script>
    export default {

        data(){
            return {
                personVisible: false,
                personList:[],
                student: {
                    pname:'',
                    picture:'',
                    detail: '',
                    ptype:2
                }
            }
        },
        mounted(){
            this.getPersonListFn();

        },
        methods:{
            toDetail(){
                this.$router.push("/teacherDetail")
            },
            getPersonListFn(){
                var params={
                    type:2
                }
                this.centralControl.axios.centralControl(
                    'getPersonList',
                    res => {
                        this.personList=res;
                    },
                    params
                );

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            personSuccess(res){
                this.student.picture = res.data[0];
                console.log(this.student.picture+"11112343")
            },
            handleSuccess(res){
                this.student.picture = res.data[0];
                console.log(this.student.picture+"11112343")
            },
            addPerson(){
                this.centralControl.axios.centralControl(
                    'addPerson',
                    res => {
                        this.$message({
                            message: '添加老师成功',
                            type: 'success'
                        });
                        this.getPersonListFn();
                        this.personVisible=false;
                    },
                    this.student
                );
            },
            deletePerson(row){
                const id = row.id
                var params = {
                    id
                }
                this.centralControl.axios.centralControl(
                    'deletePerson',
                    res => {
                        this.getPersonListFn();
                    },
                    params
                );
            }
        }
    }
</script>

<style lang="less" scoped>
    ul.pic-list {
        padding: 20px 0 10px;
    }
    ul.pic-list li {
        float: left;
        margin: 10px 35px 5px 0;
    }
    ul.pic-list li  {
        color: #666;
    }
    img {
        width: 150px;
        height: 200px;
    }
    ul.pic-list li p {
        padding: 15px 0;
        color: #000;
        text-align: center;
    }
</style>
